<!DOCTYPE html>
<html>
<head>
    <title>项目列表</title>
    #parse("include/header.html")
    <link rel="stylesheet" href="/statics/css/vue-multiselect.min.css">
    <link rel="stylesheet" href="/statics/css/projectManage/projectTemplate.css">

</head>
<body>
<div class="container-fluid" id="dpTemple">
    <div class="row-fluid col-sm-2 col-xs-2 col-md-2 col-lg-2 template-list">
        <div class="container-fluid">
            <p class="pull-right">
                <router-link to="/template/add">新增模板</router-link>
            </p>
        </div>
        <div class="template-nav">
            <div class="list-group">
                <template v-for="(item, index) in template">
                    <router-link :to="'/template/edit/'+index" class="list-group-item">
                        <p class="list-group-item-heading one-line">
                            {{item.tempName}}
                        </p>
                        <p class="list-group-item-text two-line">
                            {{item.description}}
                        </p>
                        <img src="/statics/img/step_delete.png" class="delete-template" @click="deleteTemplate(item.tempId)">
                    </router-link>

                    <div class="default-template" v-if="item.isDefault === '1'">
                        默认
                    </div>
                    <div class="set-default-template" @click="setDefault(item.tempId)" v-else>
                        设为默认
                    </div>
                </template>
            </div>
        </div>
    </div>
    <div v-if="!isLoading">
        <transition name="fade" mode="out-in">
            <router-view  :options="templateNoticeUser" :template="template" :templateinfo="templateinfo" @submit-success="reloadTemplate"
                         :key="$route.path"></router-view>
        </transition>
    </div>
</div>

<template id="templateForm">
    <div class="row-fluid col-sm-10 col-xs-10 col-md-10 col-lg-10">
        <div class="panel panel-default no-border">
            <div class="panel-heading">
                <img src="/statics/img/template_head_sign.png">
                模板信息
            </div>
            <div class="panel-body">
                <div class="form-group row">
                    <p class="col-sm-2 col-form-label">模板名称：</p>
                    <div class="col-sm-10" :class="{ 'has-error': errors.has('name')}">
                        <input type="text" v-validate="'required'" class="form-control " placeholder="输入模板名称"
                               v-model="templateInfo.tempName" name="name">
                        <i v-show="errors.has('name')" class="fa fa-warning is-danger"></i>
                        <span v-show="errors.has('npame')" class="help is-danger">{{ errors.first('name') }}</span>
                    </div>
                </div>
                <div class="form-group row">
                    <p class="col-sm-2 col-form-label">详细描述：</p>
                    <div class="col-sm-10" :class="{ 'has-error': errors.has('description')}">
                        <input type="text" v-validate="'required'" class="form-control" placeholder="输入模板描述"
                               v-model="templateInfo.description" name="description">
                        <i v-show="errors.has('description')" class="fa fa-warning is-danger"></i>
                        <span v-show="errors.has('description')" class="help is-danger ">{{ errors.first('description') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group row">
            <div class="panel panel-default no-border">
                <div class="panel-heading">
                    <img src="/statics/img/template_head_sign.png">
                    阶段配置
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <div>
                        <ul class="nav nav-pills nav-step" ref="step">
                            <div class="step-scroll-left" v-if="stepStart>0" @click="toPrev()">
                                <img src="/statics/img/step_left.png" alt="" class="left">
                            </div>
                            <li v-for="(item, index) in templateInfo.projTemplateStepEntities" :class="[index==stepActive ? 'active' : '']"
                                v-if="index >= stepStart && index < (stepCount  + stepStart) ">
                                <img class="badge-notify" @click="removeStep(index)"
                                     src="/statics/img/step_delete.png"/>
                                <a :href="'#' + index +'-pills'" data-toggle="tab" :title="item.stepName "
                                   @click="setActive(index)"
                                   @dblclick="edit(index)">
                                    <p v-if=" item.status === 'show' ">{{ item.stepName }}</p>
                                    <input v-if=" item.status === 'edit'" style='color: black; width: 56px'
                                           v-model="templateInfo.projTemplateStepEntities[index].stepName" @blur="show(index)"
                                           @keydown.enter="show(index)" v-focus="true"/>
                                </a>
                            </li>
                            <li class="add-step-li">
                                <a href="javascript:;" class="add-step last" @click="addNewStep">新增模板</a>
                            </li>
                            <div class="step-scroll-right"
                                 v-if="stepStart + stepCount < templateInfo.projTemplateStepEntities.length "
                                 @click="toNext()">
                                <img src="/statics/img/step_right.png" alt="" class="right">
                            </div>
                        </ul>
                    </div>
                    <!-- Tab panes -->
                    <div class="tab-content tab-step">
                        <div v-for="(item, index) in templateInfo.projTemplateStepEntities" class="tab-pane fade"
                             :class="[index==0 ? 'in active' : '']" :id="index + '-pills'">
                            <template-step-form :item="item" :options="options"></template-step-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group row">

            <button @click="submitForm" class="button-confirm" v-if="type === 'add'">创建模板</button>
            <button @click="submitForm" class="button-confirm" v-if="type === 'edit'">修改模板</button>
            <button class="button-cancel" @click="toProjMan">取消</button>
        </div>
    </div>
</template>

<template id="templateStepForm">
    <div>
        <div class="flex-container">
            <div class="flex-left">
                <label>默认完成时间：上一环节偏移</label>
                <vue-numeric v-model.number="item.defaultMove" class="input-number"></vue-numeric>
                <select class="custom-select input-number" v-model="item.dayMonth">
                    <option value=30 selected>月</option>
                    <option value=1>天</option>
                </select>
                <label class="">当离完成时间</label>
                <vue-numeric v-model.number="item.finishNoticeDate" class="input-number"></vue-numeric>
                <label class="">天,通知给</label>
            </div>
            <div class="flex-right">
                <v-select multiple
                          v-model="item.noticeStaffArray"
                          :options="options"
                          placeholder="选择通知人"
                          select-label="按enter选择"
                          :multiple="true"
                          label="label"
                          track-by="label"
                          :preserve-search="true"
                          :hide-selected="true"
                          :close-on-select="false">

                </v-select>
            </div>
        </div>
        <div class="form-line">
            <div class="flex-container">
                <div class="flex-left">
                    <label>当任务变更时，默认通知给</label>
                </div>
                <div class="flex-right white">
                    <v-select multiple
                              v-model="item.taskChangeStaffArray"
                              :options="options"
                              placeholder="选择通知人"
                              select-label="按enter选择"
                              :multiple="true"
                              label="label"
                              track-by="label"
                              :preserve-search="true"
                              :hide-selected="true"
                              :close-on-select="false">
                    </v-select>
                </div>
            </div>
        </div>
        <div class="form-line">
            <label>当日程结束前</label>
            <vue-numeric v-model.number="item.finishScheduleNoticeDate" class="input-number"></vue-numeric>
            <label>天，通知给参与人</label>
        </div>
        <div>
            <div class="flex-container attach">
                <div class="flex-left flex-checkbox">
                    <input type="checkbox" class="" v-model="item.attach"/>
                </div>
                <div class="flex-right" v-if="item.attach">
                    <div class="form-line">
                        <label>本环节需要上传文档 对上传文档要求</label>
                            <label> word</label>
                            <vue-numeric v-model.number="item.attachWord" class="input-number"></vue-numeric>

                            <label> excel</label>
                            <vue-numeric v-model.number="item.attachExcel" class="input-number"></vue-numeric>
                            <!--<input type="checkbox" class="custom-control"  />-->
                            <label> pdf</label>
                            <vue-numeric v-model.number="item.attachPdf" class="input-number"></vue-numeric>
                    </div>
                    <input type="text" class="form-control" placeholder=" 对上传的文档进行具体说明" v-model="item.attachContent">
                </div>
                <div class="flex-right" v-else>
                    <div class="form-line">
                        <label>本环节需要上传文档 对上传文档要求</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

#parse("include/footer.html")

<script src="/statics/libs/accounting.umd.js"></script>
<script src="/statics/libs/vue-numeric.min.js"></script>
<script src="/statics/libs/vue-router.min.js"></script>
<script src="/statics/libs/vue-resource.js"></script>
<script src="/statics/libs/vue-multiselect.min.js"></script>
<script src="/statics/libs/vee-validate.min.js"></script>
<script src="/statics/libs/zh_CN.js"></script>
<script src="/statics/js/projectManage/projectTemplate.js?_${date.systemTime}"></script>


</body>
</html>